import { listInterfaceInfoByPageUsingGET } from '@/services/yuapi-backend/interfaceInfoController';
import { DownloadOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Button, Card, List, message } from 'antd';
import React, { useEffect, useState } from 'react';

/**
 * 主页
 * @constructor
 */
const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [list, setList] = useState<API.InterfaceInfo[]>([]);
  const [total, setTotal] = useState<number>(0);

  const loadData = async (current = 1, pageSize = 5) => {
    setLoading(true);
    try {
      const res = await listInterfaceInfoByPageUsingGET({
        current,
        pageSize,
      });
      setList(res?.data?.records ?? []);
      setTotal(res?.data?.total ?? 0);
    } catch (error: any) {
      message.error('请求失败，' + error.message);
    }
    setLoading(false);
  };

  useEffect(() => {
    loadData();
  }, []);

  return (
    <PageContainer title="在线接口开放平台">
      <Card title="开发者密钥">
        <div style={{ fontSize: '16px' }}>accessKey：{localStorage.getItem('accessKey')}</div>
        <br />
        <div style={{ fontSize: '16px' }}>secretKey：{localStorage.getItem('secretKey')}</div>
      </Card>
      <br />
      <Card title="开发者SDK">
        <Button
          type="primary"
          icon={<DownloadOutlined />}
          href="https://gitee.com/shen-cairen/api-open-platform/tree/shencairen/"
          target="_blank"
        >
          SDK使用详情
        </Button>
      </Card>
      <br />
      <Card title="接口列表">
        <List
          className="my-list"
          loading={loading}
          itemLayout="horizontal"
          dataSource={list}
          renderItem={(item) => {
            const apiLink = `/interface_info/${item.id}`;
            return (
              <List.Item
                actions={[
                  <a key={item.id} href={apiLink}>
                    查看
                  </a>,
                ]}
              >
                <List.Item.Meta
                  title={<a href={apiLink}>{item.name}</a>}
                  description={item.description}
                />
              </List.Item>
            );
          }}
          pagination={{
            // eslint-disable-next-line @typescript-eslint/no-shadow
            showTotal(total: number) {
              return '总数：' + total;
            },
            pageSize: 5,
            total,
            onChange(page, pageSize) {
              loadData(page, pageSize);
            },
          }}
        />
      </Card>
    </PageContainer>
  );
};

export default Index;
